<style lang="less" scoped>
  .card__content {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
</style>

<template>
  <el-dialog :visible.sync="currentShowFlag" append-to-body fullscreen :close-on-click-modal="false" :close-on-press-escape="false" @open="handleDialogOpen" @closed="handleDialogClosed">
    <div slot="title" class="detail-dialog__header">未上市托管入系统报表-改革推进情况表</div>
    <div>
      <el-row :gutter="20">
        <el-col :span="6" v-for="(companyItem, companyIndex) in companyList" :key="companyIndex" style="margin: 0 0 10px 0">
          <el-card shadow="always">
            <div class="card__content">
              <div>{{companyItem.name}}</div>
              <el-tag :type="companyItem.value | completeRatioFilter">{{companyItem.value}} %</el-tag>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div slot="footer">
      <el-button type="primary">{{$t('operation.export')}}</el-button>
      <el-button @click="handleDialogClose">{{$t('operation.close')}}</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  name: 'statistic_detail',
  data () {
    return {
      companyList: [
        { name: '大庆油田', value: 80 },
        { name: '辽河油田', value: 44 },
        { name: '长庆油田', value: 35 },
        { name: '塔里木油田', value: 19.4 },
        { name: '新疆油田', value: 20 },
        { name: '西南油气田', value: 80 },
        { name: '吉林油田', value: 100 },
        { name: '大港油田', value: 100 },
        { name: '青海油田', value: 20 },
        { name: '华北油田', value: 40 },
        { name: '吐哈油田', value: 92 },
        { name: '冀东油田', value: 12 },
        { name: '大庆石化', value: 100 },
        { name: '吉林石化', value: 100 },
        { name: '抚顺石化', value: 50 },
        { name: '辽阳石化', value: 70 },
        { name: '兰州石化', value: 88 },
        { name: '独山子石化', value: 25 },
        { name: '乌鲁木齐石化', value: 77 },
        { name: '宁夏石化', value: 90 },
        { name: '大连石化', value: 22 },
        { name: '大连西太', value: 80 },
        { name: '锦州石化', value: 83 },
        { name: '锦西石化', value: 77 },
        { name: '北京油气调控中心', value: 65 },
        { name: '管道建设项目经理部', value: 53 },
        { name: '北京天然气管道', value: 83 },
        { name: '西部管道', value: 89 },
        { name: '西南管道', value: 88 },
        { name: '昆仑燃气', value: 100 },
        { name: '昆仑能源有限公司', value: 100 },
        { name: '华北天然气销售', value: 100 }
      ]
    }
  },
  filters: {
    completeRatioFilter (value) {
      if (value === 100) return 'success'
      else if (value >= 80 && value < 100) return 'info'
      else if (value >= 60 && value < 80) return 'warning'
      else if (value < 60) return 'danger'
    }
  },
  computed: {
    currentShowFlag: {
      get () { return this.showFlag },
      set (val) { this.$emit('update:showFlag', val) }
    }
  },
  props: {
    showFlag: { type: Boolean, default: false },
    viewFlag: { type: Boolean },
    detailData: { type: Object }
  },
  methods: {
    handleDialogClose () {
      this.currentShowFlag = false
    },

    handleDialogOpen () {

    },

    handleDialogClosed () {
      this.formModel = {}
    }
  }
}
</script>
